<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商家查看所有订单</title>
</head>
<link href="/css/bootstrap.css" rel="stylesheet">
<script src="/js/jquery-2.1.4.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/bootstrap.js"></script>
<style>
  /*  #div{
        width: 1200px;
        height: 600px;
    }*/
    #tb{
        text-align: center;
    }
</style>
<body>
    <div id="div">
        <table class="table table-striped table-hover table-bordered" id="tb">
            <thead>
            <tr>
                <td width="25%">商品名称</td>
                <td width="20%">商品属性</td>
                <td width="5%">购买数量</td>
                <td width="5%">总价</td>
                <td width="20%">用户收货地址</td>
                <td width="15%">
                   订单状态
                </td>
                <td width="10%">操作</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(orderview,index) in orderviews">
                <td v-text="orderview.productName"></td>
                <td v-text="orderview.property"></td>
                <td v-text="orderview.number"></td>
                <td v-text="orderview.money"></td>
                <td v-text="orderview.address"></td>
                <td v-text="orderview.status==1?'待付款':orderview.status==2&&orderview.courierNumber==''?'待发货':orderview.status==3||(orderview.status==2&&orderview.courierNumber!='')?'待收货':orderview.status==4?
                '待评价':orderview.status==5?'已取消':'已完成'"></td>
                <td>
                    <button v-if="orderview.status==2&&orderview.courierNumber==''" class="btn btn-primary btn-sm" data-toggle="modal" :data-target="getTarget(index)">发货</button><!-- 按钮触发模态框 -->
                    <!-- 模态框（Modal） -->
                    <div class="modal fade" :id="getID(index)" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">
                                        填写发货信息
                                    </h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group">
                                        <label>快递公司</label>
                                        <select class="form-control" v-model="sendGood.companyCode">
                                            <option value="">请选择快递公司</option>
                                            <option value="YTO">圆通快递</option>
                                            <option value="ZTO">中通快递</option>
                                            <option value="STO">申通快递</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputDetail">快递单号</label>
                                        <input type="text" class="form-control" id="exampleInputDetail" v-model="sendGood.courierNumber">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary" @click="sendGoods(orderview.orderId,orderview.orderInfoId,sendGood.companyCode,sendGood.courierNumber)">
                                        发货
                                    </button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="8">
                    <div>
                        总共<span v-text="page.dataCount"></span>条订单&nbsp;&nbsp;&nbsp;
                        当前是第<span v-text="page.pageIndex"></span>页&nbsp;&nbsp;&nbsp;
                         总共有<span v-text="page.pageCount"></span>页&nbsp;&nbsp;&nbsp;
                          <a href="javascript:" @click="prev()">上一页</a>&nbsp;&nbsp;&nbsp;
                          <a href="javascript:" @click="next()">下一页</a>&nbsp;&nbsp;&nbsp;
                    </div>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>

<script type="text/javascript">
    new Vue({
        el:"#div",
        data:{
            orderviews:[],
            index:1,
            number:5,
            page:null,
            sendGood:{
                orderId:0,
                orderInfoId:0,
                courierNumber:'',
                companyCode:''
            }
        },
        created:function(){
            this.selectAllOrderById();
        },
        methods:{
            sendGoods:function(orderId,orderInfoId,companyCode,courierNumber){
                if(companyCode==""||courierNumber==""){
                    alert("请输入快递单号");
                    return;
                }
                $.ajax({
                   url: "/merchant/sendGoods" ,
                   data:{
                       orderId:orderId,
                       orderInfoId:orderInfoId,
                       companyCode:companyCode,
                       courierNumber:courierNumber
                   },
                    dataType: "json",
                    type: "post",
                    success:function(data){
                       alert("发货成功");
                       location.reload();
                    },
                    error:function(data){
                        alert(data.responseJSON.message);
                        location.reload();
                    }
                });
            },
            prev : function() {
                if (this.page.pageIndex == 1) {
                    alert("已经是首页");
                    return;
                }
                this.page.pageIndex = this.page.pageIndex - 1;
                this.index = this.page.pageIndex;
                this.selectAllOrderById();
            },
            next : function() {
                if (this.page.pageIndex == this.page.pageCount) {
                    alert("已经是尾页");
                    return;
                }
                this.page.pageIndex = this.page.pageIndex - (-1);
                this.index = this.page.pageIndex;
                this.selectAllOrderById();
            },
            selectAllOrderById:function(){
                var _this=this;
                $.ajax({
                   url:"/merchant/selectOrderById",
                   data:{
                       index:_this.index,
                       number:_this.number
                   },
                   dataType:"json",
                   type:"post",
                   success:function(data){
                        _this.orderviews=data.list;
                        _this.page=data.obj;
                       // console.log(_this.orderviews[0].status==1?'待付款':_this.orderviews[0].status==2?'待发货':_this.orderviews[0].status==3?'待收货':'待评价');
                   },
                    error : function(data) {
                        alert(data.responseJSON.message);
                    }
                });
            },
            getID:function(index){
                return "myModal"+index;
            },
            getTarget:function (index) {
                return "#myModal"+index;
            },
        }
    });
</script>
</body>
</html>